<!-- 滑动切换选项卡演示(标准写法) -->
<template>
	<view class="container">
		<!-- 使用z-paging-swiper为根节点可以免计算高度 -->
		<z-paging-swiper>
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中 -->
			<template #top>
				<view class="fixed-con">
					<statusBar></statusBar>
					<view class="header-nav">
						<image @click="toSearch" src="../../static/search.svg"/>
						<view class="nav-title">
							<view v-for="(item,index) in headerOption.navList" :key="index" :class="isChangeNav === index?'change-nav':''" @click="changeNav(index)">
								<text>{{item}}</text>
								<view></view>
							</view>
						</view>
						<image src="../../static/scan.svg"/>
					</view>
					<view class="header-tag">
						<view class="tag-list" >
							<view v-for="(item,index) in headerOption.tagList" :key="index">
								<view 
									v-if="(isChangeNav === 0 && index < 3) || (isChangeNav === 1 && index > 2)" 
									:key="index" 
									:class="isChangeTag === index?'change-tag':''" 
									@click="changeTag(index)">{{item}}
								</view>
							</view>
						</view>
						<image src="../../static/switchover.svg" v-if="isrowCon" :class="{'change-layout':changeLayout}" @click="switchOver"></image>
					</view>
				</view>
			</template>
			<!-- swiper必须设置height:100%，因为swiper有默认的高度，只有设置高度100%才可以铺满页面  -->
			<swiper class="swiper" :current="isChangeTag" @animationfinish="swiperChange">
				<swiper-item class="swiper-item" v-for="(item,index) in headerOption.tagList" :key="index">
					<swiper-list-item :tabIndex="index" :currentIndex="isChangeTag" :layout="layout"></swiper-list-item>
				</swiper-item>
			</swiper>
			<!-- 固定在底部的 -->
			<!-- <template #bottom>
				<fooBar :home="0" @toIndex="toIndex"></fooBar>
			</template> -->
		</z-paging-swiper>
	</view>

</template>

<script setup>
	import request from '/http/request.js';

	import { ref,reactive,computed } from 'vue'
  import {
    onLoad,
    onShow
  } from "@dcloudio/uni-app";
	import swiperListItem from './swiperListItem.vue'

	
	import { useSystemInfoStore } from '@/stores/systemInfo'
	const {statusBarHeight} = useSystemInfoStore()
	
	const headerOption = reactive({
		navList:['玩家说','品牌说'],
		tagList:['发现','关注','热门','最新','关注'],
	})
	const isChangeNav = ref(0)
	const isChangeTag = ref(0)
	const layout = reactive({
		discover:false,  //发现栏 布局是否改变  默认为横向瀑布流
		hot:false  //热门栏 布局是否改变   默认为横向瀑布流
	})
	const dataList = reactive([
		{
			id:1,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头1',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
		{
			id:2,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头2',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
		{
			id:3,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头3',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
		{
			id:4,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头4',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
		{
			id:5,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头5',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
		{
			id:6,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头6',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
		{
			id:7,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头7',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
		{
			id:8,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头8',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
		{
			id:9,
			imgs:[
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/a7c733de-3733-4ecc-b6ce-88b9ba751e2b20240325141654.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/21/f01cbd59-f9e7-4b9c-9dfd-e9f1bc138f4a/5b414e1c-0378-4563-9761-f474968c0c5420240322142050.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/f4b800c5-b07c-4f8d-9476-75ddcd469c9720240325141647.JPG',
				'https://images.luisaviaroma.cn/Big/c/2024/03/20/f984d6b4-411c-4f36-ac89-688dc0fe9386/5fe0716f-2318-473b-940f-6bdfb7ea93ee20240325141657.JPG'
			],
			title:'回头率爆表~这个lv麻将太戳我了我了我了我了我了我了',
			auth:'剁椒鱼头9',
			isLike:false,
			likeNum:'1.9w',
			commentNum:'213',
			collectNum:'253',
			releaseTime:'2024-7-1 10:00'
		},
	])
	
	
	onLoad(() => {
		// console.log('index页面',statusBarHeight);
		// getStatusBarHeight()
	})

	const toSearch = () => {
		uni.navigateTo({ url: '/pages/recommendSearch/index' });
	}

	//是否显示切换排列
	const isrowCon = computed(() => {
		return (isChangeTag.value === 0 || isChangeTag.value === 2)
	})
	const changeLayout = computed(() => {
		if(isChangeTag.value === 0 && layout.discover){
			return true
		}else if(isChangeTag.value === 2 && layout.hot){
			return true
		}
		return false
	})

	const changeNav = (item) => {
		isChangeNav.value = item
		if (item === 0){
			isChangeTag.value = 0
		}else {
			isChangeTag.value = 3
		}
	}
	const changeTag = (item) => {
		isChangeTag.value = item
	}

	const swiperChange = (e) => {
		// console.log('swiperChange',e.detail.current);
		const current = e.detail.current
		isChangeTag.value = current
		if(current < 3){
			isChangeNav.value = 0
		}else {
			isChangeNav.value = 1
		}
	}

	//切换排列
	const switchOver = () => {
		if(isChangeTag.value === 0){
			layout.discover ? layout.discover = false : layout.discover = true
		}else if(isChangeTag.value === 2){
			layout.hot ? layout.hot = false : layout.hot = true
		}
		// console.log('layout',layout);
	}

</script>

<style lang="scss" scoped>
	.container{
		width: 100vw;
		height: 100vh;
  	/* background-color:#F4F4F4; */
  	/* background-color:rgb(192, 15, 15); */
  	background: linear-gradient( 180deg, rgba(244,244,244,0) 0%, #F4F4F4 100%);
	}
	.swiper {
		height: 100%;
	}

	.fixed-con {
		background-color: white;
		.status-bar{
			width: 750rpx;
		}
		.header-nav{
			width: 750rpx;
			height: 90rpx;
			padding: 0 30rpx;
			@include flex(row,space-between);
			box-sizing: border-box;
			image{
				width: 40rpx;
				height: 40rpx;
			}
			.nav-title{
				width: 230rpx;
				height: 66rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #333333;
				@include flex(row,space-between);

				.change-nav{
					font-weight: 700;
					font-size: 36rpx;
					color: #333333;
					@include flex(column,space-between);
					view{
						width: 68rpx;
						height: 8rpx;
						background: #16DFF2;
						border-radius: 6rpx;
					}
				}
			}
		}
		.header-tag{
			width: 750rpx;
			height: 116rpx;
			padding: 0 30rpx;
			@include flex(row,space-between);
			box-sizing: border-box;
			image{
				width: 40rpx;
				height: 40rpx;
				transition: all .2s linear;
			}
			.tag-list{
				@include flex(row,flex-start);
				>view>view{
					width: 108rpx;
					height: 60rpx;
					background: #F4F4F4;
					border-radius: 30rpx;
					font-weight: 400;
					font-size: 26rpx;
					color: #999999;
					@include flex();
					margin-right: 24rpx;
				}
				.change-tag{
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.change-layout{
				transform: rotate(90deg)
			}
		}
	}

</style>

